<template>
    <div>
        <Row class="menu-header">
            <Col span="5" style="text-align: left;">
                <img class="index-icon2" src="../../assets/index/i-icon4.png">
                <span class="index-title super-vip"><strong>超级会员免费</strong></span>
            </Col>
            <Col span="16" offset="3">
                <Row type="flex" justify="center">
                    <Col span="22">

                    </Col>
                    <Col span="2">
                        <Button type="text" class="vip-more-btn">查看更多></Button>
                    </Col>
                </Row>

            </Col>
        </Row>
        <Row type="flex" justify="center" style="margin-top: 20px;">
            <Col span="8" v-for="i in sales" :key="i.id" style="padding: 0.4%;">
                <Card class="vip-free">
                    <Row>
                        <Col span="8">
                            <img :src="i.pic" class="vip-img">
                        </Col>
                        <Col span="16">
                            <div class="vip-content">
                                <div class="vip-title vip-f">
                                    {{i.title}}
                                </div>
                                <div class="content-seller vip-f">
                                    销量：{{i.sellerVolume}}
                                </div>
                                <div class="content-seller content-price vip-f">
                                    <span style="font-weight: 600;color: #E6A23C">免费</span>
                                    <span style="color: red"><img src="../../assets/vip/vip-icon.png" class="vip-icon"></span>
                                    <span style="text-decoration:line-through"> ￥{{i.oldPrice}}</span>
                                </div>
                                <div style="margin-top: 3.5%">
                                    <Row>
                                        <Col span="10">
                                            <el-button type="warning" plain size="mini">立即领取</el-button>
                                        </Col>
                                        <Col span="10" offset="4">
                                            <div class="content-seller-name" @click="userInfo(i.sellerId)">
                                                <Avatar style="float: left" size="small" :src="i.avatar"/>
                                                <div style="float: left ;margin-left: 0.3rem;color: white">
                                                    {{i.sellerName}}
                                                </div>
                                            </div>
                                        </Col>
                                    </Row>

                                </div>

                            </div>


                        </Col>
                    </Row>

                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    export default {
        name: "vipFree",
        data() {
            return {
                sales: [
                    {
                        id: 1,
                        title: "《都挺好》中隐藏的中国人性格密码",
                        sellerName: "苏大强",
                        oldPrice: 12.5,
                        newPrice: 5.5,
                        pic: require("../../assets/hotRecommend/hot6.jpeg"),
                        sellerVolume: 12807,
                        sellerId: 12,
                        avatar: "https://i.loli.net/2017/08/21/599a521472424.jpg"
                    },
                    {
                        id: 2,
                        title: "高情商沟通课：教你建立舒服的关系",
                        sellerName: "苏大强",
                        oldPrice: 12.5,
                        newPrice: 5.5,
                        pic: require("../../assets/hotRecommend/hot3.jpeg"),
                        sellerVolume: 447,
                        sellerId: 12,
                        avatar: "https://i.loli.net/2017/08/21/599a521472424.jpg"
                    },
                    {
                        id: 3,
                        title: "手把手教你成为K歌之王",
                        sellerName: "苏大强",
                        oldPrice: 125,
                        newPrice: 5.5,
                        pic: require("../../assets/hotRecommend/hot5.jpeg"),
                        sellerVolume: 12387,
                        sellerId: 12,
                        avatar: "https://i.loli.net/2017/08/21/599a521472424.jpg"
                    },
                    {
                        id: 4,
                        title: "掌握人生的20堂职场课：成为不可取代的自己",
                        sellerName: "苏大强",
                        oldPrice: 12.5,
                        newPrice: 5.5,
                        pic: require("../../assets/hotRecommend/hot7.jpg"),
                        sellerVolume: 43,
                        sellerId: 12,
                        avatar: "https://i.loli.net/2017/08/21/599a521472424.jpg"
                    },
                    {
                        id: 5,
                        title: "拆锦囊-----尽显人生智慧的60个锦囊妙计",
                        sellerName: "苏大强",
                        oldPrice: 12.5,
                        newPrice: 5.5,
                        pic: require("../../assets/hotRecommend/hot9.jpeg"),
                        sellerVolume: 65,
                        sellerId: 12,
                        avatar: "https://i.loli.net/2017/08/21/599a521472424.jpg"
                    },
                    {
                        id: 6,
                        title: "品牌与营销：从入门到精通",
                        sellerName: "苏大强",
                        oldPrice: 12.5,
                        newPrice: 5.5,
                        pic: require("../../assets/hotRecommend/hot11.jpeg"),
                        sellerVolume: 1287,
                        sellerId: 12,
                        avatar: "https://i.loli.net/2017/08/21/599a521472424.jpg"
                    },
                    {
                        id: 7,
                        title: "如何抓住0~6岁敏感期，培养孩子受益一生的好习惯？",
                        sellerName: "苏大强",
                        oldPrice: 12.5,
                        newPrice: 5.5,
                        pic: require("../../assets/hotRecommend/hot10.jpeg"),
                        sellerVolume: 1287,
                        sellerId: 12,
                        avatar: "https://i.loli.net/2017/08/21/599a521472424.jpg"
                    },
                    {
                        id: 8,
                        title: "1节课教你资产五年翻倍！",
                        sellerName: "苏大强",
                        oldPrice: 12.5,
                        newPrice: 5.5,
                        pic: require("../../assets/hotRecommend/hot4.jpeg"),
                        sellerVolume: 1287,
                        sellerId: 12,
                        avatar: "https://i.loli.net/2017/08/21/599a521472424.jpg"
                    },
                    {
                        id: 9,
                        title: "最好的爱叫做好好说话：所有不美好的行为都是在呼唤爱",
                        sellerName: "苏大强",
                        oldPrice: 12.5,
                        newPrice: 5.5,
                        pic: require("../../assets/hotRecommend/hot1.jpeg"),
                        sellerVolume: 1287,
                        sellerId: 12,
                        avatar: "https://i.loli.net/2017/08/21/599a521472424.jpg"
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    .super-vip {
        color: white;
    }

    .vip-more-btn {
        color: white;
    }

    .vip-more-btn:hover {
        background: #211c19;
        color: cornflowerblue;
    }

    .vip-free {
        width: 100%;
        text-align: left;
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.2);
        border: none;
    }

    .vip-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 500;
        width: 100%;
        text-align: left;
        padding: 2px 0 0 0;
        color: white;
    }

    .vip-content {
        padding-left: 4%;
    }

    .vip-f {
        padding-bottom: 4%;
    }

    .vip-img {
        width: 100%;
        height: 7.6rem;
        border-radius: 5%;
    }

    .vip-img:hover {
        transform: scale(1.03);
    }

    .content-seller-name {
        padding-top: 5%;
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
        float: left;
    }

    .content-seller-name /deep/ .ivu-avatar-small {
        width: 18px;
        height: 18px;
    }

    .vip-icon {
        width: 1.8rem;
        height: 1.0rem;
        margin: 0 10px 0px 6px;
        vertical-align: middle;
        padding-bottom: 2px;
    }
</style>